<template>
  <div class="stock-list">
    <d2-container type="card" betterScroll class="aside-container">
      <el-form
        class="query-form"
        :label-position="'top'"
        label-width="80px"
        :model="queryData"
        ref="queryData"
        @submit.native.prevent="handleSubmitQuery"
      >
        <el-form-item>
          <el-button type="ghost" size="small" @click="handleResetQuery"
            >重置</el-button
          >
          <el-button
            native-type="submit"
            size="small"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item label="供应商名称" prop="name">
          <el-input
            placeholder="请输入供应商名称搜索"
            v-model="queryData.name"
            size="small"
          ></el-input>
        </el-form-item>
      </el-form>
    </d2-container>
    <d2-container class="main-container">
      <template slot="header">
        <div class="header-title">采购供应商</div>
        <el-button type="warning" size="small" @click="addSupplier">添加采购供应商</el-button>
      </template>
      <el-table
        :data="purchaseSupplierList"
        size="mini"
        border
        :header-cell-style="{background:'#f2f3f7', color: '#333', textAlign: 'center'}"
        style="width: 100%"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="name" align="center" label="供应商名" />
        <el-table-column prop="status" align="center" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status">启用</div>
            <div v-if="!scope.row.status">禁用</div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注" />
        <el-table-column prop="createTime" align="center" label="创建时间" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link style="font-size: 13px;" type="primary" @click="editPurchaseSupplier(scope.row)">编 辑<i class="el-icon-edit el-icon--right" /></el-link>
<!--            <el-link style="margin-left: 10px;font-size: 13px;" type="primary" @click="delPurchaseSupplier(scope.row.id)">删 除<i class="el-icon-delete el-icon&#45;&#45;right" /></el-link>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        style="overflow: auto hidden; height: 32px;float:right;"
        :current-page="page.currPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </d2-container>
    <el-dialog
      title="新增采购供应商"
      :visible.sync="supplierDialog"
      :close-on-click-modal="false"
      width="30%"
      center
      @close="afterSupplierDialog()"
    >
      <el-form ref="supplierForm" class="normalForm" :rules="rulesList" :model="purchaseSupplierEntity">
        <el-form-item label="供应商名称" prop="name" label-width="120px">
          <el-input v-model="purchaseSupplierEntity.name" size="small" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="120px">
          <el-radio v-model="purchaseSupplierEntity.status" :label="true">启用</el-radio>
          <el-radio v-model="purchaseSupplierEntity.status" :label="false">禁用</el-radio>
        </el-form-item>
        <el-form-item label="备注" label-width="120px">
          <el-input v-model="purchaseSupplierEntity.remark" type="text" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="addPurchaseSupplierMethod()">确 定</el-button>
        <el-button size="mini" @click="supplierDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
import cookies from '@/libs/util.cookies'
export default {
  name: 'stock-supplier',
  data() {
    return {
      loading: false,
      supplierDialog: false,
      purchaseSupplierList: [],
      purchaseSupplierEntity: { status: true },
      type: 'add',
      queryData: {
        pageNum: 1,
        pageSize: 10
      },
      page: {
        currPage: 1,
        pageSize: 10,
        totalCount: 100
      },
      rulesList: {
        name: [{ required: true, message: '请输入供应商名', trigger: 'blur' }]
      }

    }
  },
  created() {
    this.getPurchaseSupplierList()
  },
  methods: {
    handleSubmitQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.fetchStockList()
        } else {
          return false
        }
      })
    },
    handleResetQuery() {
      this.$refs['queryForm'].resetFields()
    },
    getPurchaseSupplierList() {
      this.loading = true
      const query = {}
      api
        .STOCK_PURCHASE_PAGE(query)
        .then((response) => {
          this.loading = false
          this.purchaseSupplierList = response.list
          this.page.currPage = response.currPage
          this.page.pageSize = response.pageSize
          this.page.totalCount = response.totalCount
        })
        .catch(() => {
          this.loading = false
        })
    },
    addSupplier() {
      this.type = 'add'
      this.supplierDialog = true
    },
    editPurchaseSupplier(row) {
      this.purchaseSupplierEntity = JSON.parse(JSON.stringify(row))
      this.type = 'edit'
      this.supplierDialog = true
    },
    addPurchaseSupplierMethod() {
      this.$refs['supplierForm'].validate((valid) => {
        if (valid) {
          if (this.type === 'add') {
            api.addPurchaseSupplier(this.purchaseSupplierEntity).then(() => {
              this.$message.success('添加成功')
              this.supplierDialog = false
              this.getPurchaseSupplierList()
            })
          } else {
            api.editPurchaseSupplier(this.purchaseSupplierEntity).then(() => {
              this.$message.success('修改成功')
              this.supplierDialog = false
              this.getPurchaseSupplierList()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  }
}
</script>

<style lang="scss">
.stock-list {
  height: 100%;
}
.aside-container {
  .query-form {
    .el-form-item__content {
      text-align: center;
    }
  }
}
</style>
